import { t } from 'i18next'
import React, { FC, useState } from 'react'
import { Avatar, IconStatusOffline, IconStatusVideoSrc } from '@/pages/manager/components'
import { IconMute, ItemLabelWrap, StyledListItem, IconBatchPollState, IconActionOffline } from './style'
import shallow from 'zustand/shallow'
import { IconStatusMute } from '../VmpView/style'
import { IMcc } from '@/api/manager/type'
import useLock from '@/hooks/useLock'
import { useMccStore } from '@/pages/manager/store'
import { fetchCallOnlineMt, fetchMute } from '@/api/manager/actions'
import { useVmpTypeStore } from '../store.get'
import useTimeout from '@/hooks/useTimeout'
import { IconChairman, IconSpeaker } from '../MemberList/style'
import { useBatchMemberListStore } from './store'

export const ListItem: FC<{ mcc: IMcc }> = ({ mcc }) => {
	const useStore = useVmpTypeStore((state) => state.getStore())
	const selectedMtKeys = useStore((state) => state.memberList.map((x) => x.mt_key), shallow)
	const { toggleClick, toggleShift, toggleCtrl, poll_select_mt_key_list } = useBatchMemberListStore(
		(state) => ({
			poll_select_mt_key_list: state.poll_select_mt_key_list,
			toggleClick: state.toggleClick,
			toggleCtrl: state.toggleCtrl,
			toggleShift: state.toggleShift,
		}),
		shallow
	)

	const isSelected = selectedMtKeys.includes(mcc.mtKey)
	const [isCall, setIsCall] = useState(false)
	const [startTimeout] = useTimeout()
	const handleCall = () => {
		setIsCall(true)
		startTimeout(() => setIsCall(false))
		const meetingMoid = useMccStore.getState().mccInfo.meetingMoid
		fetchCallOnlineMt(meetingMoid, [mcc])
	}
	const handleMute = useLock(async () => {
		const meetingMoid = useMccStore.getState().mccInfo.meetingMoid
		await fetchMute(mcc.status.isMute, meetingMoid, mcc)
	})
	const handleCheckItem = (e: React.MouseEvent) => {
		if (e.ctrlKey) {
			toggleCtrl(mcc.mtKey)
		} else if (e.shiftKey) {
			toggleShift(mcc.mtKey)
		} else {
			toggleClick(mcc.mtKey)
		}
	}
	return (
		<StyledListItem className={`${poll_select_mt_key_list.includes(mcc.mtKey) ? 'selected' : ''}`}>
			<ItemLabelWrap
				nestingLevel={0}
				isOnline={mcc.status.isOnline}
				isVip={false}
				isMeeting={!mcc.isMt}
				isNameBlue={mcc.status.isManager || mcc.status.isDoubleFlow}
				onClick={handleCheckItem}
				paddingWidth={isSelected ? 0 : 22}
			>
				<div className="avatar">
					{isSelected && <IconBatchPollState></IconBatchPollState>}
					<Avatar value={mcc} />
				</div>
				{mcc.isMt && mcc.status.isChairman && <IconChairman />}
				{mcc.status.isSpeaker && <IconSpeaker />}
				<div className="name" title={mcc.name}>
					<pre data-mtid={mcc.mtKey}>{mcc.name}</pre>
				</div>
			</ItemLabelWrap>
			{!isCall && (
				<div className="mt-status">
					{!mcc.status.isOnline && <IconStatusOffline title={t('离线')} />}{' '}
					{mcc.status.isOnline && mcc.isMt && !mcc.status.isVideoSrc && (
						<IconStatusVideoSrc title={t('视频源')} />
					)}
					{mcc.status.isOnline && <IconStatusMute title={t('哑音')} isOn={mcc.status.isMute} />}
				</div>
			)}
			{!isCall && (
				<div className="mt-action">
					{!mcc.status.isOnline && <IconActionOffline title={t('呼叫')} onClick={handleCall} />}
					{mcc.status.isOnline && (
						<IconMute
							title={mcc.status.isMute ? t('取消哑音') : t('设置哑音')}
							isOn={mcc.status.isMute}
							onClick={handleMute}
						/>
					)}
				</div>
			)}
			{isCall && <div className="is-calling">{t('正在呼叫中...')}</div>}
		</StyledListItem>
	)
}
